<template>
<div class="container">
        <!-- 左侧列表 -->
        <div class="left-sidebar">
            <!-- 应用标题 -->
            <div class="sidebar-title">
                <img src="../../public/标识.jpg" class="imagetitle"/>
                <span class="label">地磅卫士管理系统</span>
            </div>
            <!-- 按钮列表 -->
            <div class="button-list">
                <button class="sidebar-button" onclick="switchTab('home')">首页</button>
                <button class="sidebar-button" onclick="switchTab('about')">关于</button>
                <button class="sidebar-button" onclick="switchTab('services')">服务</button>
                <button class="sidebar-button" onclick="switchTab('contact')">联系我们</button>
                <button class="sidebar-button" onclick="switchTab('home')">首页</button>
                <button class="sidebar-button" onclick="switchTab('about')">关于</button>
                <button class="sidebar-button" onclick="switchTab('services')">服务</button>
                <button class="sidebar-button" onclick="switchTab('contact')">联系我们</button>
                <button class="sidebar-button" onclick="switchTab('home')">首页</button>
                <button class="sidebar-button" onclick="switchTab('about')">关于</button>
                <button class="sidebar-button" onclick="switchTab('services')">服务</button>
                <button class="sidebar-button" onclick="switchTab('contact')">联系我们</button>
            </div>
        </div>

        <!-- 主内容区域 -->
        <div class="main-content">
            <div class="main-title" >
                <img src="../../public/title.jpg">
                <span class="label-father">首页/</span>
                <span class="label-son">过磅管理/收发货管理</span>

        </div>
            <span class="main-h">
                <img src="../../public/manage.png">
           </span>
            <span class="main-do">
   
                <!-- 左侧区域 -->
                <div class="main-search">
                <div class="search-choose">
                        <div class="sectionProject">
                        <label for="project">项目：</label>
                        <select id="project" name="project">
                        <option value="project1">项目1</option>
                        <option value="project2">项目2</option>
                        <option value="project3">项目3</option>
                        </select>
                        </div>
                        <br>
                        <!-- 地磅部分 --> 
                       <div class="sectionScale">
                                <label for="scale">地磅：</label>
                                <select id="scale" name="scale">
                                <option value="scale1">地磅1</option>
                                <option value="scale2">地磅2</option>
                                <option value="scale3">地磅3</option>
                                </select>
                        </div>
                </div>
                
                <div class="search-history">
                        <div class="search-complite">
                        <div class="search-condition">
                                <label for="scale">过磅记录</label>
                                <button type="button" @click="matching">手动匹配</button>
                        </div>
                        <div class="inputdate">
                            <label style="color: black;">过磅时间:</label>
                            <input type="datetime-local" @change="onbeginSelected" id="beginDate" placeholder="请选择日期">
                            <label style="color: black;">至</label>
                            <input type="datetime-local" @change="onendSelected" id="endDate" placeholder="请选择日期">
                        </div>

                        <div class="form-row">
                                <label>车牌号码：</label>
                                <input id="license_plate" type="text" placeholder="请输入车牌号码">
                                <!-- 收货/发货 -->
                                <label>收货/发货：</label>
                                <select id="work_type">
                                        <option value="收货">收货</option>
                                        <option value="发货">发货</option>
                                </select>
                        </div>


                        <div class="form-row">
                                <label>数据状态：</label>
                                <select id="data_status">
                                        <option value="有效">有效</option>
                                        <option value="无效">无效</option>
                                </select>
                                <!-- 空车/重车 -->
                                <label>空车/重车：</label>
                                <select id="car_status">
                                        <option value="全部">全部</option>
                                        <option value="空车">空车</option>
                                        <option value="重车">重车</option>
                                </select>
                                <!-- 查询和重置按钮 -->
                                <button type="button" @click="onSearch">查询</button>
                                <button type="button" @click="onTest">重置</button>
                        </div>
  
                        </div>
                        </div>
                        
                        
                        
                        
                        <div class="search-content">
                        <table>
                        <thead>
                                <tr>
                                <th>序号</th>
                                <th>车牌</th>
                                <th>过磅时间</th>
                                <th></th>
                                </tr>
                        </thead>
                        <tbody id="contain">
                            <tr v-for="(record, index) in recordings" :key="index">
                                <td>
                                    <!-- 添加单选按钮，并使用 v-model 绑定选中的行 -->
                                    <input type="checkbox" :value="index" v-model="selectedRecord" name="checkboxing"/>
                                </td>
                                <td>{{ index + 1 }}</td>
                            <td>{{ record.licensePlate }}</td>
                            <td>{{ record.weighingTime }}</td>
                            <td>{{ record.workType }}</td>
                            <td>{{ record.dataStatus }}</td>
                            <td>{{ record.carStatus }}</td>
                            </tr>
                        </tbody >
                        </table>


                        </div>
                </div>
                <!-- 右侧区域 -->
                <div class="main-takeweight">
                       <div class="weightShow">
                        <p v-if="selectedPrefix" style="min-width: 20%;">当前选择的车牌前缀是：{{ selectedPrefix }}</p>
                        
                        <select v-model="selectedPrefix" id="Prelicense" style="color: black;">
                            <option value="" disabled selected>请选择车牌前缀</option>
                            <option v-for="(prefix, index) in prefixes" :key="index" :value="prefix">
                                {{ prefix }}
                            </option>
                        </select >

                        

                                <input type="text" id="carNumble" placeholder="输入内容">

                                <label class="inline-label" id="weight">称重结果:33.5吨</label>

                                <div class="radio-group" id="carType">
                                    <input type="radio" id="radio1" name="radioGroup" value="重车过磅" checked @change=handleRadioChange>
                                    <label for="radio1">重车过磅</label>
                                    <input type="radio" id="radio2" name="radioGroup" value="空车过磅" @change=handleRadioChange>
                                    <label for="radio2">空车过磅</label>
                                </div>
                       </div>
                       
                       
                       <div id="content" class="allcontent">
                            <div class="content-重车过磅" id="重车过磅">
                        <div class="form-row">
                                <label>是否关联订单</label>
                                <select id="specification">
                                        <option value="YES">YES</option>
                                        <option value="No">NO</option>
                                </select>
                                <span>订单选择</span>
                                <select @click="orderSelected" id="orderchoose">
                                    <option v-if="orders.length === 0" disabled>点击加载数据...</option>
                                    <option v-for="(order, index) in orders" :key="index" :value="order.projectName">
                                    {{ order.projectName }}
                                    </option>
                                </select>
                        </div>
                       
                       <div class="form-row">
                                <label>收货/发货</label>
                                <select id="workType">
                                        <option value="收货">收货</option>
                                        <option value="发货">发货</option>
                                </select>
                                <span>供应商选择</span>
                                <select @click="orderSelected" id="supplierchoose">
                                    <option v-if="orders.length === 0" disabled>点击加载数据...</option>
                                    <option v-for="(order, index) in orders" :key="index" :value="order.supplier">
                                    {{ order.supplier }}
                                    </option>
                                </select>
                        </div>
                       <div class="form-row">
                                <label>材料名称：</label>
                                <input type="text" id="matierialName" placeholder="请输入材料名称">
                                <span>材料规格</span>
                                <input type="text" id="specification" placeholder="请输入材料规格">
                                <span>材料单位</span>
                                <input type="text" id="unit" placeholder="请输入材料单位">
                       </div>
                       <div class="form-row">
                                <label>备注：</label>
                                <input type="text" id="remark" placeholder="备注">
                       </div>
                       <div class="gitee">
                        <button type="button" @click="weighing">确认称重</button>
                        <button type="button" @click="reweighing" class="reset">重新称重</button>
                        <!-- <div class="vidioShow">

                        </div> -->
                       </div>
                            </div>

                        <div class="content-空车过磅" id="空车过磅" style="display: none;">
                            
                        <div class="form-row">
                            <label>订单名称：</label>
                            <input type="text" id="orderName" placeholder="订单名称">
                            <label>收货/发货：</label>
                            <input type="text" id="deliveryType" placeholder="收货/发货">
                        </div>
                       
                       <div class="form-row">
                        <label>供应商名称：</label>
                        <input type="text" id="supplierName" placeholder="供应商名称">
                        </div>
                       <div class="form-row">
                                <label>材料名称：</label>
                                <input type="text" id="NmaterialName" placeholder="材料名称：">
                                <span>材料规格</span>
                                <input type="text" id="Nspecification" placeholder="材料规格">
                                <span>材料单位</span>
                                <input type="text" id="Nunit" placeholder="材料单位">
                       </div>
                       <div class="form-row">
                                <label>备注：</label>
                                <input type="text" id="Nremark" placeholder="备注">
                       </div>
                       <div class="form-row">
                                <label>实收(发)数量：</label>
                                <input type="text" id="actualQuantity" placeholder="实收(发)数量">
                                <label>理论过磅数量：</label>
                                <input type="text" id="theoreticalWeight" placeholder="理论过磅数量">
                                <label>实际过磅数量：</label>
                                <input type="text" id="actualWeight" placeholder="实际过磅数量">
                       </div>
                       <div class="gitee">

                        <button type="button">打印榜单</button>
                        <button type="button">取消匹配</button>
                        <button type="button">编辑信息</button>
                        <button type="button">保存</button>
                        <button type="button">返回</button>

                        <!-- <div class="vidioShow">

                        </div> -->
                       </div>
                            </div>
                       </div> 
                        <div class="vidioShow">
                            <div class="weight_title">
                                <label>毛重:{{Gross  }}</label>
                               <label>皮重:{{ Tare }}</label>
                               <label>净重:{{ Net }}</label>
                            </div> 
                            <div class="weight_vidio">
                                <div class="weight_vidio1">
                                <div class="vidio_text">
                                <label>空车过磅时间:     {{Tare_Time}}</label>
                                <label>空车过磅重量:     {{Tare }}</label>
                                </div>
                                
                                <div class="vidio_vidio">
                                <label>过磅影像:</label>
                                </div>
                                
                               </div> 



                                <div class="weight_vidio2">
                                <div class="vidio_text">
                                <label >重车过磅时间:     {{Gross_Time}}</label>
                                <label>重车过磅重量:     {{Gross}}</label>
                                </div> 
                                    <div class="vidio_vidio">
                                    <label>过磅影像:</label>
                                    </div>
                                </div> 


                            </div> 
                        </div> 
                </div>
            </span>
        </div>
    </div>
</template>

<script lang="ts" setup name="Person">
import {ref,reactive} from 'vue'
import qs from 'qs'

let  Gross = ref(null);
let  Tare = ref(null);

let  Gross_Time = ref(null);
let  Tare_Time = ref(null);

let  Net = ref(null);
let  orders = ref([]);
let selectedPrefix=ref('')
let  recordings = ref([]);
let  LastfixID = 0;
let  matchCriteria=ref({
            weighingTime_begin:null,
            weighingTime_end:null,
            licensePlate:null,
            dataStatus:null,
            workType:null,
            carStatus:null
        });
let  weighingMessage=ref({
            materialName:null,
            licensePlate:null,
            weight:null,
            orderchoose:null,
            supplierchoose:null,
            materialSpecification:null,
            materialUnits:null,
            remarks:null,
            workType:null,
            dataStatus:null,
            
            orderID:null,
            weighingTime:null,
            weighbridgeName:null
});
let insertNullcar=ref({

            weighbridgeName:null,
            licensePlate:null,
            dataStatus:null,
            
            workType:null,
            weight:null,
            heavyweighingTime:null,
            carStatus:null,
            weightHeavy:null
        });
let selectedRecord = null; 
       const prefixes=[
        '鄂', '皖', '苏', '沪', '浙', '闵', '湘', '赣', '蜀', '渝',
        '贵', '云', '粤', '桂', '琼', '港', '澳', '台'
      ];

        const radioGroup = document.querySelectorAll('input[name="radioGroup"]');
        // 获取内容区域
        const contentDivs = document.querySelectorAll('#content > div');

 


        function onbeginSelected(event) {
            const selectedDate = event.target.value;
            // 显示弹窗
        }
        function onendSelected(event) {
            const selectedDate = event.target.value;
            // 显示弹窗
        }
        function onSelect(event){
            const selectedPrefix = event.target.value;
            console.log('选择的车牌前缀：', selectedPrefix);
        }
        function onSearch (){
                matchCriteria.value.licensePlate = document.getElementById("license_plate").value;
                matchCriteria.value.weighingTime_begin = document.getElementById('beginDate').value;
                matchCriteria.value.weighingTime_end = document.getElementById('endDate').value;
                matchCriteria.value.dataStatus = document.getElementById('data_status').value;
                matchCriteria.value.workType = document.getElementById('work_type').value;
                matchCriteria.value.carStatus = document.getElementById('car_status').value;
                matchCriteria.value.dataStatus="有效";
                // 格式化时间
                if (matchCriteria.value.weighingTime_begin) {
                    matchCriteria.value.weighingTime_begin = matchCriteria.value.weighingTime_begin.replace('T', ' ') + ':00';
                }
                if (matchCriteria.value.weighingTime_end) {
                    matchCriteria.value.weighingTime_end = matchCriteria.value.weighingTime_end.replace('T', ' ') + ':00';
                }

                console.log("查询条件：", matchCriteria.value);

                if (!matchCriteria.value.licensePlate) {
                    alert("请输入车牌号");
                    return;
                }

                // 发送请求
                axios.post("http://localhost:8080/user/Recording", matchCriteria.value)
                    .then((result) => {
                        console.log("后端返回的数据：", result.data);
                        recordings.value = result.data.data; // 更新 recordings
                    })
                    .catch((err) => {
                        console.error("请求失败：", err);
                    });
            };

                function matching() {
                const selectedCheckbox = document.querySelector('#contain input[type="checkbox"]:checked');
                 
                if (selectedCheckbox) {
                    let index=selectedCheckbox.value;
                    console.log('当前选中的复选框:', index);
                    let record=recordings.value[index];

                    // console.log(license,date);

                    insertNullcar.value.weighbridgeName = "地磅1";
                    insertNullcar.value.weight = 5000;
                    // 

                    insertNullcar.value.licensePlate = record.licensePlate;
                    
                    insertNullcar.value.dataStatus = "有效";

                    insertNullcar.value.workType = record.workType;
                    insertNullcar.value.heavyweighingTime = record.weighingTime;

                    insertNullcar.value.weightHeavy = 9000;

                    axios.post("http://localhost:8080/user/insertn", insertNullcar.value)
                    .then((result) => {
                        console.log("result.data.data", result.data.data);
                        
                        
                        let rs = result.data;
                        console.log("data", rs);
                        console.log("data.actualWeight", rs.data.actualWeight);

                        document.getElementById('orderName').value = rs.data.order.orderName;
                        
                        document.getElementById('supplierName').value = rs.data.order.supplier;
                        
                        document.getElementById('NmaterialName').value = rs.data.order.materialName;
                        
                        document.getElementById('Nspecification').value = rs.data.order.materialSpecification;
                        document.getElementById('Nunit').value = rs.data.order.materialUnits;
                        
                        // document.getElementById('specification').value = rs.data.order.materialSpecification;
                        // document.getElementById('unit').value = rs.data.order.materialUnits;

                        document.getElementById('actualQuantity').value = rs.data.receiveWeight;
                        document.getElementById('theoreticalWeight').value = rs.data.order.materialShould;
                        document.getElementById('actualWeight').value = rs.data.actualWeight;

                        document.getElementById('Nremark').value = rs.data.remark;
                        document.getElementById('deliveryType').value = rs.data.workType;
                        let Nlincens=rs.data.order.licensePlate;
                        const prefix = Nlincens.substring(0, 1); // 或 str.slice(0, 1)

                        // 提取剩余部分（A12345）
                        const suffix = Nlincens.substring(1);
                        console.log(prefix)
                        console.log(suffix)
                        document.getElementById('Prelicense').value = prefix;
                        document.getElementById('carNumble').value = suffix;
                        
                        document.getElementById('radio2').checked = true;
                        document.getElementById("重车过磅").style.display="none";//隐藏
                        document.getElementById("空车过磅").style.display="block";//显示
                        
                        console.log("rs.data.receiveWeight", rs.data.receiveWeight);
                        console.log("rs.data.order.materialShould", rs.data.order.materialShould);
                        console.log("rs.data.actualWeight", rs.data.actualWeight);
                        Gross.value=rs.data.receiveWeight;
                        Tare.value=insertNullcar.value.weight;
                        Net.value=rs.data.actualWeight;
                        
                        Gross_Time.value = record.weighingTime;
                        Gross.value=insertNullcar.value.weightHeavy;
                        Tare.value = insertNullcar.value.weight;
                        Tare_Time.value = ref(null);
                        
                    })
                    .catch((err) => {
                        console.error("请求失败：", err);
                    });

                } else {
                    console.log('没有选中的复选框');
                }
                // if (selectedRecord) {
                //     const cells = selectedRecord.querySelectorAll('td');
                //     const record = {
                //         licensePlate: cells[2].textContent,
                //         weighingTime: cells[3].textContent,
                //         workType: cells[4].textContent,
                //         dataStatus: cells[5].textContent,
                //         carStatus: cells[6].textContent,
                //     };
                //     console.log('选中的行信息:', record);
                // } else {
                //     console.log('没有选中任何行');
                // }
            }
    
            function handleRadioChange(event) {
                const selectedValue = event.target.value; // 获取选中的值
                console.log(selectedValue);
                if(selectedValue=="重车过磅")
                {
                    
                    document.getElementById("重车过磅").style.display="block";//隐藏
                    document.getElementById("空车过磅").style.display="none";//显示
                }else if(selectedValue=="空车过磅"){
                    document.getElementById("重车过磅").style.display="none";//隐藏
                    document.getElementById("空车过磅").style.display="block";//显示
                }
                
            }

            function orderSelected(){
                if (orders.length > 0) return;
                axios.post("http://localhost:8080/user/orders", matchCriteria.value)
                    .then((result) => {
                        console.log("后端返回的数据：", result.data);
                        orders.value = result.data.data; // 更新 recordings
                    })
                    .catch((err) => {
                        console.error("请求失败：", err);
                    });
            };
            function weighing(){
                weighingMessage.value.materialName=document.getElementById("matierialName").value;
                weighingMessage.value.licensePlate=document.getElementById("Prelicense").value+document.getElementById("carNumble").value;
                weighingMessage.value.weight=33.8;
                weighingMessage.value.orderchoose=document.getElementById("orderchoose").value;
                weighingMessage.value.supplierchoose=document.getElementById("supplierchoose").value;
                weighingMessage.value.materialSpecification=document.getElementById("specification").value;
                weighingMessage.value.materialUnits=document.getElementById("unit").value;
                weighingMessage.value.remarks=document.getElementById("remark").value;
                
                weighingMessage.value.workType=document.getElementById("workType").value;
                weighingMessage.value.dataStatus="有效";
                // 需要修改
                weighingMessage.value.weighbridgeName="地磅3";
                const now = new Date();  
                const year = now.getFullYear();  
                const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以+1  
                const day = String(now.getDate()).padStart(2, '0');  
                const hours = String(now.getHours()).padStart(2, '0');  
                const minutes = String(now.getMinutes()).padStart(2, '0');  
                const seconds = String(now.getSeconds()).padStart(2, '0');  
                const timeString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; 

                weighingMessage.value.weighingTime=timeString;
                // .replace('T', ' ') + ':00'
                weighingMessage.value.orderID=202403250001;
                console.log(weighingMessage.value);
                
                axios.post(`http://localhost:8080/user/insertv`, weighingMessage.value)
                    .then((result) => {
                    LastfixID=result.data.data;
                    console.log(LastfixID);
                    })
                    .catch((err) => {
                        console.error("请求失败：", err);
                    });
                    
            };
            function reweighing(){
                console.log("${num}"+LastfixID);
                
                if(LastfixID!=null)
                {
                    axios.post(`http://localhost:8080/user/invalid?id=${LastfixID}`)
                    .then((result) => {
                    console.log(result);
                    })
                    .catch((err) => {
                        console.error("请求失败：", err);
                    });
                    weighing();
                }
            };
</script>

<style scoped>
/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex;
}
.container {
    min-height:100vh;
    display: flex;
    justify-content: space-around;
}
.allcontent{
    height:100vh ;
    width:100vh;
}
/* 左侧列表 */
.left-sidebar {
    width: 15%; /* 占页面宽度的1/5 */
    background-color: #2c3e50; /* 深色背景 */
    color: white;
    /* padding: 20px; */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    justify-content: space-around;
}
.vidio_vidio{
    height: 80%;
    width:100%;
}
.sidebar-title {
    padding: 10px 10px;
    display: flex; /* 启用 flexbox 布局 */
    align-items: center; /* 垂直居中对齐 */
    font-family: Arial, sans-serif;
    background-color: black;
    min-height:10vh;
}

.imagetitle {
    width: auto; /* 设置图片宽度 */
    height: 10%;
    margin-right: 10px; /* 图片和标签之间的间距 */
}

.label {
    font-size: 20px;
}

/* 按钮列表 */
.button-list {
    /* justify-content: space-around; */
    min-height:90vh;
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

/* 按钮样式 */
.sidebar-button {
    background-color: #34495e;
    color: white;
    border: none;
    padding: 15px;
    font-size: 16px;
    cursor: pointer;
    /* border-radius: 5px; */
    transition: background-color 0.3s ease;
    flex-grow: 1
}

.sidebar-button:hover {
    background-color: #1abc9c; /* 悬停时的颜色 */
}

/* 主内容区域 */
.main-content {
    flex-grow: 1; /* 占据剩余空间 */
    background-color: #ecf0f1;
    min-height: 100vh; /* 确保容器高度至少为视口高度 */
    display: flex; /* 启用 Flexbox 布局 */
    flex-direction: column; /* 垂直排列子元素 */
}

.main-title {
    height: 5%; /* 占容器高度的 5% */
    width: 100%; /* 宽度为 85% */
    /* background-color: #3498db;  */
    color: black; /* 文字颜色 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: left; /* 水平居中 */
    flex-direction:row;
    
}
.main-title img{
    padding-left: 20px;
    padding-right: 5px;
    height: 50%; /* 占容器高度的 5% */
    width: auto;
}
.label-son{
     font-size: 13px;
}

.main-h {
    height: 5%; /* 占容器高度的 5% */
    width: 100%; /* 宽度为 85% */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: left; /* 水平居中 */
    box-shadow: 0 15px 30px rgba(0,0,0,.3);
        }
.main-h img{
    padding-left: 20px;
    padding-right: 5px;
    height: 75%; /* 占容器高度的 5% */
    width: auto;
}

.main-do {
    height: 90%; /* 占容器高度的 90% */
    width: 100%; /* 宽度为 85% */
    color: white; /* 文字颜色 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

/* 左侧区域：main-search */
.main-search {
    width: 32%; /* 占容器宽度的 40% */
    display: flex; /* 启用 Flexbox 布局 */
    flex-direction: column; /* 垂直排列子元素 */
    background-color: white;
    height: 100%;
    border: 1px solid white;
    padding: 5px;
    padding-top:10px;
}
.main-takeweight {
    width: 68%; /* 占容器宽度的 60% */
    background-color: white; /* 背景色，用于调试 */
    color: white; /* 文字颜色 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 100%;
    border: 1px solid black;
    padding: 5px;
    flex-direction: column;
}
.search-choose {
    height: 20%; /* 占 main-search 高度的 10% */
    background-color: white; /* 背景色，用于调试 */
    color: white; /* 文字颜色 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    border: 1px solid black;
    margin-bottom: 5px;
    flex-direction: column; /* 垂直排列子元素 */
}

/* 搜索历史区域 */
.search-history {
    height: 80%; /* 占 main-search 高度的 90% */
    background-color: white; /* 背景色，用于调试 */
    color: white; /* 文字颜色 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    border: 1px solid black;
    margin-top: 5px;
    justify-content: center; /* 水平居中 */
    flex-direction: column; /* 垂直排列子元素 */
}



/* 每个部分的样式 */
.sectionProject {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    width: 80%;
}
.sectionScale {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    width: 80%;
}
/* 标签样式 */
.sectionProject label {
    font-size: 16px;
    color: #333;
    min-width: 60px; /* 标签最小宽度，确保对齐 */
}
.sectionScale label {
    font-size: 16px;
    color: #333;
    min-width: 60px; /* 标签最小宽度，确保对齐 */
}
/* 下拉框样式 */
select {
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    flex-grow: 1; /* 下拉框占据剩余空间 */
    background-color: white;
    cursor: pointer;
}

/* 下拉框悬停效果 */
select:hover {
    border-color: #007BFF;
}

/* 下拉框聚焦效果 */
select:focus { 
    outline: none;
    border-color: #007BFF;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}


/* 表单行样式 */
.form-row ,
.inputdate{
        display: flex;
        align-items: center;
        gap: 5px;
        margin-bottom: 15px;
        justify-content: center; /* 水平居中 */
        flex-direction: row; /* 垂直排列子元素 */
        vertical-align:middle;
        width:100%;
}
.inputdate label{
        font-size: 12px;
        color: #333;
        justify-content: center;
}
/* 标签样式 */
.form-row label {
        min-width: 70px;
        font-size: 14px;
        color: #333;
        justify-content: center;
}

/* 输入框和下拉框样式 */
.form-row select {
        padding: 8px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        flex-grow: 1;
        vertical-align:middle;
}
.form-row input,
.inputdate input
{
        padding: 8px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        flex-grow: 1;
        justify-content: center;
        vertical-align:middle;
}
/* 按钮样式 */
.form-row button {
        padding: 8px 8px;
        font-size: 14px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        background-color: #007BFF;
        color: white;
}
.form-row span {
        color: black;
}
.search-condition{
    font-size: 16px;
    color: #333;
    min-width: 60px; /* 标签最小宽度，确保对齐 */
    margin: 10px;
}
.search-condition label{
    font-size: 16px;
    padding-right: 90px;
    padding-left: 90px;
}
.search-condition button{
    height: 30px;
    width:100px;
    color: white;
    background-color: #007BFF;
    border:none;
    border-radius: 5px;
}
.search-condition2{
        flex-direction: row; /* 垂直排列子元素 */
        
}
.search-history{
    height: 20%; /* 占 main-search 高度的 90% */
    background-color: white; /* 背景色，用于调试 */
    color: white; /* 文字颜色 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    border: 1px solid black;
    margin-top: 5px;
    justify-content: center; /* 水平居中 */
    flex-direction: column; /* 垂直排列子元素 */
        
}
.search-content{
    height: 80%; /* 占 main-search 高度的 90% */
    background-color: white; /* 背景色，用于调试 */
    color: black; /* 文字颜色 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    border: 1px solid black;
    margin-top: 5px;
    justify-content: center; /* 水平居中 */
    flex-direction: column; /* 垂直排列子元素 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        
}
        .search-content th{
        flex-direction: row; /* 垂直排列子元素 */     
        width:30%;          
        }
        table {
            width: 100%;
            height:100%;
            border-collapse: collapse;
            table-layout: auto;
        }

        /* 表头样式 */
        thead {
            /* padding-left:100px; */
            color: black;
        }

        thead th {
            padding: 12px;
            text-align: left;
        }

        /* 表格行样式 */
        tbody td {
            padding: 12px;
            border-bottom: 1px solid #ddd;
            font-family: Arial, sans-serif; 
            font-size: 12px;
            white-space: nowrap; /* 强制内容不换行 */
        }

        /* 表头固定时的阴影效果 */
        thead th {
            box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
        }
        
        .boxs{
        width: 50px; /* 设置方框的宽度 */
        height: 25px; /* 设置方框的高度 */
        border: 1px solid #000; /* 设置边框的宽度和颜色 */
        /* padding: 20px;  */
        }
        .box_one{
        width: 25px; /* 设置方框的宽度 */
        height: 25px; /* 设置方框的高度 */
        border-right: 1px solid #000; /* 设置边框的宽度和颜色 */
        /* padding: 20px;  */
        }
        .vidio_text{
            height: 20%; /* 占 main-search 高度的 90% */
            width:100%;
            align-items: center; /* 垂直居中 */
            flex-direction: row; /* 垂直排列子元素 */
            display: flex;
        }
        .vidio_text label {
        flex: 1; /* 均匀分配宽度 */
        width: 50%; /* 每个 label 占 50% 宽度 */
        text-align: left; /* 文字居中 */
        padding: 10px; /* 内边距 */

        }
        .weightShow{
                min-height: 10%; /* 占 main-search 高度的 90% */
                background-color: white; /* 背景色，用于调试 */
                color: black; /* 文字颜色 */
                display: flex;
                align-items: center; /* 垂直居中 */
                flex-direction: row; /* 垂直排列子元素 */
                width:100%;
        }
        .weightShow select{
            padding-left:200px;
            max-width:0%;
            height: 40%;
            color:black;
        }

        .weightShow input{
            height: 40%;
        }
        .inline-label{
            font-size: 30px;
            height: 40%;
        }
   
        .content-重车过磅
        {
                min-height: 40%; /* 占 main-search 高度的 90% */
                background-color: white; /* 背景色，用于调试 */
                color: black; /* 文字颜色 */
                display: flex;
                align-items: center; /* 垂直居中 */
                justify-content: center; /* 水平居中 */
                flex-direction: column; /* 垂直排列子元素 */
                width:100%;
        }
        .vidioShow{
                min-height: 50%; /* 占 main-search 高度的 90% */
                background-color: blue; /* 背景色，用于调试 */
                color: black; /* 文字颜色 */
                display: flex;
                align-items: center; /* 垂直居中 */
                justify-content: center; /* 水平居中 */
                flex-direction: column; /* 垂直排列子元素 */
                width:100%;
        }
        .weight_title {
        height: 8%; /* 高度占 8% */
        background-color: #f0f0f0; /* 背景色，用于区分 */
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: space-around; /* 内容均匀分布 */
        width:100vh;
        }

        .weight_vidio {
            height: 98%; /* 高度占 98% */
            background-color: #e0e0e0; /* 背景色，用于区分 */
            display: flex;
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            width:100vh;
            flex-direction: column;
        }
        .weight_vidio1{
            height: 50%; /* 高度占 98% */
            background-color: #e0e0e0; /* 背景色，用于区分 */
            display: flex;
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            width:100vh;
            flex-direction: column;
        }
        .weight_vidio2{
            height: 50%; /* 高度占 98% */
            background-color: #e0e0e0; /* 背景色，用于区分 */
            display: flex;
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            width:100vh;
            flex-direction: column;
        }
        .gitee button{
            padding: 10px 60px;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            background-color: #007BFF;
            color: white;
            cursor: pointer;
            justify-content: center; /* 水平居中 */
            flex-direction: column; /* 垂直排列子元素 */
        }

        .gitee{
            display: flex; /* 启用 Flexbox 布局 */
            gap: 10px; /* 按钮之间的间距 */
        }
</style>